<template>
  <div>
    <div v-for="product in products" :key="product.id" class="product-item">
      <img :src="product.image" alt="product image" class="product-image" />
      <div class="product-details">
        <h3>{{ product.name }}</h3>
        <p>{{ product.price }}</p>
        <button @click="addToCart(product)">加入购物车</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ProductList',
    data() {
      return {
        categoryId: 0,
        products: [],
      }
    },
    watch: {
      // 监控路由变化，当路由变化时重新获取商品列表
      // 前面是被监听的属性，后面是当被监听的属性发生变化时执行的函数，
      // 可调用methods中的函数，直接写函数名字符串即可，也可以自己编写匿名函数
      '$route.params.categoryId': 'fetchProducts'
    },
    mounted() {
      // 初始化时获取商品列表，但是只会执行一次，不会在路由切换时重新获取
      this.fetchProducts();
    },
    methods: {
      fetchProducts() {
        // 从路由中获取ID
        this.categoryId = this.$route.params.categoryId;
        // 根据categoryId获取请求后台商品列表，这里只是模拟
        this.products = [
          {
            id: 1,
            name: `分类ID为${this.categoryId}的商品-1`,
            price: '￥100',
            image: 'https://via.placeholder.com/150',
          },
          {
            id: 2,
            name: `分类ID为${this.categoryId}的商品-2`,
            price: '￥200',
            image: 'https://via.placeholder.com/150',
          }
        ]
      },
      addToCart(product) {
        alert(`添加 ${product.name} 到购物车!`)
      },
    },
    
  }
</script>

<style scoped>
  .product-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    padding: 10px 0;
  }
  .product-image {
    width: 100px;
    height: 100px;
    margin-right: 20px;
  }
  .product-details {
    flex: 1;
  }
  .product-details h3 {
    margin: 0;
    font-size: 18px;
  }
  .product-details p {
    margin: 5px 0;
    color: #888;
  }
  .product-details button {
    padding: 5px 10px;
    background-color: #409eff;
    border: none;
    color: white;
    cursor: pointer;
  }
  .product-details button:hover {
    background-color: #66b1ff;
  }
</style>
